<template>
	<view class="content">
		<u-navbar bgColor="#fff" :placeholder="true" :fixed="true" @leftClick="$back" title="dream约文" titleStyle="{'color': '#000'}">
			
		</u-navbar>
		<view class="biao">
			<view class="qli" v-for="(item,index) in userInfo.user_tags">
				<text>#{{item}}</text>
				<u-icon name="close" color="#BBBDBF" size="14" @click="delUserTags(index)"></u-icon>
			</view>
		</view>
		<textarea class="shubox" maxlength="6" v-model="label" placeholder="请输入新标签,多标签请用逗号隔开"></textarea>
		<view class="ti" @click="submit">
			增加
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				userInfo: {},
				erList: [],
				label: ''
			}
		},
		onLoad() {

		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			submit() {
				if (this.label) {
					var user_tags = this.userInfo.user_tags
					var prams = ''
					if (user_tags.length) {
						var isIn = false
						user_tags.forEach(item => {
							if (item == this.label) {
								isIn = true
							}
						})
						if (isIn) {
							this.$common.errorToShow('标签不能重复')
							return
						} else {
							user_tags.push(this.label)
							prams = user_tags.join(',')
						}
					} else {
						prams = this.label
					}
					
					this.saveLabel({ 'user_tags': prams }, false)
				} else {
					this.$common.errorToShow('请输入标签')
				}
			},
			getUserInfo() {
				this.$api.default.request('user/userInfo',{},'GET',false).then((res) => {
					if (res.code) {
						this.userInfo = res.user
						if (!this.userInfo.user_tags) {
							this.userInfo.user_tags = []
						}
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			delUserTags(index){
				// 创建原始数组的副本
				let newArray = [...this.userInfo.user_tags];
				
				newArray.splice(index,1)
				console.log(newArray)
				this.saveLabel({user_tags:newArray.join(',')},false)
			},
			saveLabel(data,isBack = true) {
				// if (!data.user_tags) {
				// 	this.$common.errorToShow('内容不能为空')
				// 	return
				// }
				this.$api.default.request('user/saveUser', data,'POST',false).then((res) => {
					if (res.code == 1) {
						this.userInfo = res.user
						this.$common.successToShow('更新成功', () => {
							this.getUserInfo()
							if(isBack){
								uni.navigateBack()
							}
							this.label = ''
						})
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: rgba(242, 245, 242, 1);
	}

	.content {
		padding-top: 20rpx;

		.biao {
			padding: 40rpx 68rpx;
			background-color: #ffffff;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			margin-bottom: 20rpx;

			.qli {
				background: rgba(153, 153, 153, 0.102);
				padding: 2px 8px 2px 6px;
				border-radius: 89px;
				font-family: 思源黑体;
				font-size: 12px;
				// font-weight: bold;
				color: #999;
				display: flex;
				align-items: center;
				margin-bottom: 12rpx;
				margin-right: 8rpx;
			}
			
		}

		.shubox {
			padding: 40rpx 68rpx;
			width: 614rpx;
			background-color: #ffffff;
			color: #3d3d3d;
			font-size: 28rpx;
			margin-bottom: 20rpx;
			height: 280rpx;
			resize: both;
		}

		.ti {
			width: 630rpx;
			height: 86rpx;
			border-radius: 8px;
			line-height: 86rpx;
			margin: 0 auto;
			opacity: 1;
			background: #45C4B0;
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
			letter-spacing: 0em;
			color: #FFFFFF;
		}
	}
</style>